<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>马宇航 - 3D旋转文字与爱心特效</title>
    <style>
        /* 基本页面样式 */
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden; /* 隐藏滚动条，防止爱心溢出时出现 */
            font-family: 'Helvetica Neue', Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
        }

        body {
            display: grid;
            place-items: center;
            background-color: #1f1f1f; /* 使用更深的背景色衬托红色 */
            position: relative; /* 为爱心容器的绝对定位提供参考 */
        }

        /* --- 3D 文字部分 --- */

        .scene {
            width: 400px;
            height: 150px;
            perspective: 1000px;
            z-index: 2; /* 确保文字在爱心特效上层 */
        }

        .text-3d {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 12s infinite linear;
        }

        .text-3d span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 80px;
            font-weight: bold;
            -webkit-font-smoothing: antialiased;
            backface-visibility: hidden;
        }
        
        /* 将颜色方案改为红色系 */
        .text-3d span:nth-child(1) { color: #ff4757; transform: translateZ(12px); }
        .text-3d span:nth-child(2) { color: #f04050; transform: translateZ(9px); }
        .text-3d span:nth-child(3) { color: #d93a48; transform: translateZ(6px); }
        .text-3d span:nth-child(4) { color: #c2333f; transform: translateZ(3px); }
        .text-3d span:nth-child(5) { color: #ac2d37; transform: translateZ(0px); }
        .text-3d span:nth-child(6) { color: #95262f; transform: translateZ(-3px); }


        @keyframes rotate {
            0%   { transform: rotateX(-15deg) rotateY(0deg); }
            100% { transform: rotateX(-15deg) rotateY(360deg); }
        }

        /* --- 爱心特效部分 --- */

        .heart-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1; /* 确保爱心在文字下层 */
        }

        /* 爱心基础样式和形状绘制 */
        .heart {
            position: absolute;
            bottom: -50px; /* 从屏幕外开始 */
            opacity: 0;
            animation: float-up linear infinite;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 32px;
            background-color: #ff4757;
            border-radius: 20px 20px 0 0;
        }

        .heart::before {
            transform: rotate(-45deg);
            left: -14px;
            top: -2px;
        }

        .heart::after {
            transform: rotate(45deg);
            left: 0px;
            top: -2px;
        }
        
        /* 爱心上浮动画 */
        @keyframes float-up {
            0% {
                transform: translateY(0);
                opacity: 0;
            }
            10%, 90% {
                opacity: 0.7; /* 在大部分时间里保持可见 */
            }
            100% {
                transform: translateY(-100vh); /* 向上移动整个视口的高度 */
                opacity: 0;
            }
        }

        /* 
         * 通过 :nth-child 为每个爱心设置不同的属性，实现随机感
         * left: 水平位置
         * animation-duration: 动画时长，决定速度
         * animation-delay: 动画延迟开始的时间
         * transform: scale(): 缩放大小
        */
        .heart:nth-child(1) { left: 10%; animation-duration: 10s; animation-delay: 0s; transform: scale(0.6); }
        .heart:nth-child(2) { left: 20%; animation-duration: 14s; animation-delay: 1s; transform: scale(1.0); }
        .heart:nth-child(3) { left: 30%; animation-duration: 12s; animation-delay: 3s; transform: scale(0.8); }
        .heart:nth-child(4) { left: 40%; animation-duration: 15s; animation-delay: 5s; transform: scale(0.7); }
        .heart:nth-child(5) { left: 50%; animation-duration: 9s;  animation-delay: 2s; transform: scale(1.1); }
        .heart:nth-child(6) { left: 60%; animation-duration: 11s; animation-delay: 6s; transform: scale(0.9); }
        .heart:nth-child(7) { left: 70%; animation-duration: 16s; animation-delay: 1s; transform: scale(0.6); }
        .heart:nth-child(8) { left: 80%; animation-duration: 13s; animation-delay: 4s; transform: scale(1.2); }
        .heart:nth-child(9) { left: 90%; animation-duration: 10s; animation-delay: 7s; transform: scale(0.8); }
        .heart:nth-child(10) { left: 15%; animation-duration: 12s; animation-delay: 8s; transform: scale(0.9); }
        .heart:nth-child(11) { left: 85%; animation-duration: 15s; animation-delay: 9s; transform: scale(1.0); }

    </style>
</head>
<body>

    <!-- 爱心特效容器 -->
    <div class="heart-container">
        <!-- 每一个div都是一个爱心 -->
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
        <div class="heart"></div>
    </div>

    <!-- 3D文字场景 -->
    <div class="scene">
        <div class="text-3d">
            <span>马宇航</span>
            <span>马宇航</span>
            <span>马宇航</span>
            <span>马宇航</span>
            <span>马宇航</span>
            <span>马宇航</span>
        </div>
    </div>

</body>
</html>